<!-- subpkg_consult/room/components/patient-info.vue -->
<script lang="ts" setup>
  import type { ConsultRecord } from '@/types/room'

  // 定义属性接收外部传入的数据
  const props = defineProps<{ info: ConsultRecord }>()
  // 数据字典  =>  客户端和服务端的映射
  // 患病时长

  const illnessTimes = [
    {
      type: 1,
      value: '一周内',
    },
    {
      type: 2,
      value: '一个月内',
    },
    {
      type: 3,
      value: '半年内',
    },
    {
      type: 4,
      value: '半年以上',
    },
  ]

  // illnessTimes.find(item => item.type === 1)?.value
  // 是否就诊过
  const consultFlags = [
    {
      type: 1,
      value: '就诊过',
    },
    {
      type: 0,
      value: '没有就诊过',
    },
  ]

  // 点击查看
  const clickLook = () => {
    // uni有previewImage   跨端预览图片
    uni.previewImage({
      // 注意点: 数组中是图片地址
      // urls: [
      //   'https://img1.baidu.com/it/u=1268271089,1175168242&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1721581200&t=c5b77391ff8c9b37a1a8ee02f2b98b9c',
      //   'https://img1.baidu.com/it/u=3644547264,1696211212&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1721581200&t=7b3c0e2ae972cb47e0bc1d165b92f35b',
      //   'https://img0.baidu.com/it/u=3729551867,2280212096&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1721581200&t=427d4beb4aa88d1e1c77dc98eeab25ef',
      // ],
      urls: props.info.pictures.map((item) => item.url),
    })
  }
</script>

<template>
  <!-- 患者信息（21） -->
  <view class="patient-info">
    <view class="header">
      <view class="title"
        >{{ info.patientInfo?.name }} {{ info.patientInfo?.genderValue }}
        {{ info.patientInfo?.age }}岁</view
      >
      <view class="note">
        {{ illnessTimes.find((item) => item.type === info.patientInfo!.illnessTime)?.value }}
        |
        {{ consultFlags.find((item) => item.type === info.patientInfo!.consultFlag)?.value }}
      </view>
    </view>
    <view class="content">
      <view class="list-item">
        <text class="label">病情描述</text>
        <text class="note">{{ info.illnessDesc }}</text>
      </view>
      <view class="list-item">
        <text class="label">图片</text>
        <text class="note" v-if="info.pictures.length > 0" @click="clickLook">点击查看</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  .patient-info {
    padding: 30rpx;
    margin-top: 60rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
    background-color: #fff;

    .header {
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #ededed;

      .title {
        font-size: 32rpx;
        color: #121826;
        margin-bottom: 10rpx;
      }

      .note {
        font-size: 26rpx;
        color: #848484;
      }
    }

    .content {
      margin-top: 20rpx;
      font-size: 26rpx;

      .list-item {
        display: flex;
        margin-top: 10rpx;
      }

      .label {
        width: 130rpx;
        color: #3c3e42;
      }

      .note {
        flex: 1;
        line-height: 1.4;
        color: #848484;
      }
    }
  }
</style>
